<script setup>
import { onMounted, reactive } from "vue"
import { getOrderStatistic, grabOrder, getAddress } from "@/api"
import { useRouter } from "vue-router"
import { formatPrice } from "@/utils"
import goods from "@/mocks/goods.json"
import { showToast } from 'vant';
const router = useRouter();

const images = [
    '/images/market/q1.png',
    '/images/market/q2.png',
    '/images/market/q4.png',
    '/images/market/q5.png',
    '/images/market/q6.png',
];

const state = reactive({
    balance: 0,
    orders: 0,
    rebate: 0,
    total: 0,
    loading: false
})

const randomGoods = (length) => {
    var newArr = []; // 组成的新数组初始化
    for (var i = 0; i < length; i++) {
        var index = Math.floor(Math.random() * goods.length);
        var item = goods[index];
        newArr.push(item)
    }
    return newArr.reverse()
}

const goodsList = randomGoods(10);

const init = () => {
    getOrderStatistic().then(res => {
        state.balance = res.balance;
        state.orders = res.orders;
        state.rebate = res.rebate;
        state.total = res.total;
    })
}

console.log('goodsList', goods.length)

const search = () => {
    state.loading = true
    getAddress().then(res => {
        console.log('getAddress', res)
        if (res?.name) {
            grab();
        } else {
            router.push(`/address`)
        }
    }).catch(() => {
        state.loading = false;
    })
}
const grab = () => {
    grabOrder().then(res => {
        router.push(`/submit?id=${res.id}`)
    }).catch(err => {
        showToast(err.msg);
    }).finally(() => {
        state.loading = false
    })
}
onMounted(() => {
    init();
})
</script>
<style scoped>
.text-color-orange {
    color: #ff6225;
}

.text-size {
    font-size: 12px;
}

.goods-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
</style>
<template>
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img style="height: 280px; width: 100%;" :src="image" />
        </van-swipe-item>
        <template #indicator="{ active, total }">
            <div class="custom-indicator"></div>
        </template>
    </van-swipe>
    <div class="card rounded-sm mx-2 mt-3 shadow-lg border-1 mb-12">
        <div class="card-body items-center p-1 mt-3">
            <div class="w-full ">
                <button class="btn btn-primary  w-full h-4 min-h-1" style="font-size: 12px;" :disabled="state.loading"
                    @click="search">
                    <span v-if="state.loading">
                        <span class="loading loading-spinner loading-xs"></span>
                    </span>
                    <span v-else>{{ $t('Take orders') }}</span>
                </button>
            </div>
            <div class="grid grid-cols-2 gap-4  text-center border-b-2 border-gray-300 ">
                <div class="flex flex-col items-center">
                    <img src="/images/market/c.png" alt="" class="h-5 w-5">
                    <div>
                        {{ $t('Received commission') }}
                    </div>
                    <div class="text-color-orange">${{ state.rebate }}</div>
                </div>
                <div class="flex flex-col items-center">
                    <img src="/images/market/a.png" alt="" class="h-5 w-5">
                    <div>{{ $t('Available balance') }}</div>
                    <div class="text-color-orange">${{ formatPrice(state.balance) }}</div>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4  text-center">
                <div class="flex flex-col items-center">
                    <img src="/images/market/n.png" alt="" class="h-5 w-5">
                    <div>{{ $t('Number of orders') }}</div>
                    <div class="text-color-orange">{{ state.orders }}</div>
                </div>
                <div class="flex flex-col items-center">
                    <img src="/images/market/t.png" alt="" class="h-5 w-5">
                    <div>{{ $t('Total order quantity') }}</div>
                    <div class="text-color-orange">{{ state.total }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="container px-2">
        <h6 class="mt-3 mb-2 uppercase leading-3  " style="font-size: 16px;">Steps：</h6>
        <div class="text-size">1、Click the "Start Task" button and follow the prompts to complete the task</div>
        <div class="text-size">2、After completing the task, you can settle the commission to the balance</div>
    </div>

    <div class="container px-2 mt-4">
        <div class="grid grid-cols-2">
            <div v-for="item in goodsList">
                <div>
                    <img :src="item.image" alt="" class="h-14 w-full object-fill">
                </div>
                <div
                    class="text-size pl-1 pt-1 min-h-5 max-h-5  overflow-hidden whitespace-pre-wrap break-words truncate goods-title">
                    {{ item.desc }}
                </div>
                <div class="text-color-orange pl-1 ">${{ item.price }}</div>
            </div>
        </div>
    </div>
    <div class="h-1 mb-6"></div>

</template>